<template>
	<view class="container">
		<div class="userinfo_container">
			<div class="avatar">
				<img :src="userInfo.avatarUrl" alt="">
			</div>
			<van-button class="aync_btn" :style="{width: userInfo.nickName.length * 15.6 + 'px !important'}"
				type="primary" size="small" @click="asyncUserinfo">
				{{ userInfo && userInfo.id ? userInfo.nickName :"同步用户信息" }}
			</van-button>
		</div>

		<view style="padding: 10px;">
			<van-button class="new_books_room_btn" type="default" @click="createBookShelfFunc">新建书房</van-button>
			<view v-for="item in bookshelfs" style="margin: 10px 0;">
				<bookshelfcell @removeHandler="onRemoveHandler" :data="item"></bookshelfcell>
			</view>
		</view>

	</view>
</template>

<script>
	import cloudApi from "../../common/cloudApi.js"
	import bookshelfcell from "../../components/dnms-ui/bookshelfcell.vue"

	export default {
		data() {
			return {
				userInfo: {},
				bookshelfs: [],
				page: 1,
				total: 0
			}
		},
		components: {
			bookshelfcell
		},
		async onShow() {
			uni.login({
				provider: "weixin",
				success: (res) => {
					console.log(res)
					cloudApi.call({
						name: "login",
						data: {
							code: res.code
						},
						success: (res) => {
							this.userInfo = res.result.data
							// 获取书房
							if (this.userInfo && this.userInfo.id) {
								this.reload()
							}
						}
					})
				}
			})
		},
		methods: {
			/**
			 * 获取书房
			 */
			getBookshelfs() {
				cloudApi.call({
					name: "getBookshelfs",
					data: {
						page: this.page,
						pageSize: 10
					},
					success: (res) => {
						this.total = res.result.data.total
						this.bookshelfs = [...res.result.data.list, ...this.bookshelfs]
					}
				})
			},
			/**
			 * 同步用户信息
			 */
			asyncUserinfo() {
				if (!this.userInfo || !this.userInfo.id) {
					uni.getUserProfile({
						desc: "获取头像",
						success: (res) => {
							let data = Object.assign(this.userInfo, res.userInfo)
							cloudApi.call({
								name: "updateUserInfo",
								data: {
									userInfo: data
								},
								success: (res) => {
									this.userInfo = Object.assign({}, this.userInfo, res.result
										.data)
								}
							})
						}
					})
				}
			},
			/**
			 * 新建书房
			 */
			createBookShelfFunc() {
				uni.navigateTo({
					url: "../createBookShelf/index"
				})
			},
			/**
			 * 删除书房成功
			 */
			onRemoveHandler() {
				this.reload()
			},
			/**
			 * 重新加载
			 */
			reload() {
				this.page = 1
				this.bookshelfs = []
				this.getBookshelfs()
			},
			// /**
			//  * 下拉刷新
			//  */
			// onPullDownRefresh() {
			//
			// },
			/**
			 * 上拉加载更多
			 */
			onReachBottom() {
				if (this.bookshelfs.length < this.total) {
					this.page++
					this.getBookshelfs()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;

		.userinfo_container {
			width: 100%;
			height: 200px;
			margin-bottom: 20px;
			background-color: #fff;

			.avatar {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: 1px solid #f2f2f2;
				margin: 30px auto;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.aync_btn {
				display: block;
				width: 90px;
				margin: 0 auto;
			}
		}

		/deep/ .new_books_room_btn {
			.van-button--default {
				width: 90%;
				height: 45px;
				line-height: 45px;
				border-radius: 5px;
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>
